<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>购物车</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <script src="__ROOT__/static/home/js/shop/rem.js"></script>
    <script type="text/javascript" src="__ROOT__/static/home/js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="__ROOT__/static/plugins/layer.mobile-v2.0/layer_mobile/layer.js"></script>
    <link rel="stylesheet" type="text/css" href="__ROOT__/static/home/css/shop/base.css"/>
    <link rel="stylesheet" type="text/css" href="__ROOT__/static/home/css/shop/page.css"/>
    <link rel="stylesheet" type="text/css" href="__ROOT__/static/home/css/shop/all.css"/>
    <link rel="stylesheet" type="text/css" href="__ROOT__/static/home/css/shop/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="__ROOT__/static/home/css/shop/loaders.min.css"/>
    <link rel="stylesheet" type="text/css" href="__ROOT__/static/home/css/shop/loading.css"/>
    <link rel="stylesheet" type="text/css" href="__ROOT__/static/home/css/shop/slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="__ROOT__/static/home/css/shop/goodscats.css"/>
    <link rel="stylesheet" type="text/css" href="__ROOT__/static/plugins/bootstrap/css/bootstrap.css"/>
    <script type="text/javascript">
        $(window).load(function(){
            $(".loading").addClass("loader-chanage")
            $(".loading").fadeOut(300)
        })
    </script>
    <style>
        a{ color:#fcfcfc; text-decoration: none; }
        a:link {
            text-decoration:none;
        }
        a:visited {
            text-decoration:none;
        }
        a:hover {
            text-decoration:none;
        }
        a:active {
            text-decoration:none;
        }
    </style>
</head>
<!--loading页开始-->
<!--loading页结束-->
<body>
<!--header star-->
<header class="mui-bar mui-bar-nav" id="header">
    <a class="btn" href="javascript:history.go(-1)">
        <i class="iconfont icon-fanhui"></i>
    </a>
    <div class="top-sch-box top-sch-boxtwo flex-col">
        购物车
    </div>
</header>
<!--header end-->
<div  class="goods_box"  >
  {volist name="rows" id="data" key="k" }
    <div class="update">
        <div class="goodstop">
            <div class="left"><img src="__ROOT__{$data['goods_url']}"  style="width: 150px;height: 130px;"  /></div>
            <div class="left" >
                <p  style="height:60px;overflow: hidden;" >{$data['goods_name']}</p>
                <p>单价:￥{$data['goods_amount']}元</p>
                <p  >总价:￥<span  id="goods_total_{$data['id']}" >{$data['goods_amount'] * $data['goods_num']}</span>元</p>
            </div>
        </div>
        <div style="clear: both" ></div>
        <div class="update_num">
            <div class="f3 " >
            <div class="f1"><img src="__ROOT__/static/home/images/shop/jian.png"  onclick="reduceNum({$data['id']},{$data['goods_amount']})"  /></div>
            <div><input type="text" id="update_num_{$data['id']}" value="{$data['goods_num']}"  onchange="changeGoodsNum({$data['id']},{$data['goods_amount']},this)"
             style="width:65px;height: 30px;border-radius: 7px;text-align: center; "/></div>
            <div class="f1"><img src="__ROOT__/static/home/images/shop/jia.png" onclick="increaseNum({$data['id']},{$data['goods_amount']})"  /></div>
            </div>
            <div class="f2"  onclick="deleteGoods({$data['id']})"  ><i class="iconfont icon-lajixiang fr"></i></div>
        </div>
    </div>
    <div style="clear: both" ></div>
  {/volist}
</div>

<!--settlement star-->
<div class="settlement clearfloat">
    <div class="zuo clearfloat fl box-s">
        合计：￥<span  id="goods_total_cart" ></span>
    </div>
    <a href="javascript:;" class="fl db"  onclick="Settlement()"  style="font-size: 27px;">
        去结算
    </a>
</div>
<!--settlement end-->

<!--footer star-->
<footer class="page-footer fixed-footer" id="footer">
    <ul>
        <li>
            <a href="{:url('home/Index/index')}">
                <i class="iconfont icon-shouye"></i>
                <p>首页</p>
            </a>
        </li>
        <li class="active">
            <a href="{:url('home/Goodscats/goodsCatsList')}">
                <i class="iconfont icon-icon04"></i>
                <p>分类</p>
            </a>
        </li>
        <li>
            <a href="javascript:;"   onclick="seeCart()" >
                <i class="iconfont icon-gouwuche"></i>
                <p>购物车</p>
            </a>
        </li>
        <li>
            <a href="{:url('home/Userinfo/index')}">
                <i class="iconfont icon-yonghuming"></i>
                <p>个人中心</p>
            </a>
        </li>
    </ul>
</footer>
<!--footer end-->
</body>
<script>
    //查看购物车
    function seeCart(){
        $.post("{:url('home/Cart/seeCart')}",function(data){
            if( data >0){
                window.location.href="{:url('home/Cart/cartList')}";
            }else if( data==-1){
                layer.open({content: '请先登录用户',skin: 'msg',time: 3 });
                setTimeout('window.location.href="{:url(\'home/login/login\')}"',3000);
            }

        })
    }
    //去结算
    function Settlement(){
        $.post("{:url('home/Cart/SettlementByCart')}",function(data){
//            console.debug(data);
            if( data && data!=-1 && data!=-2 ){
                var data2=JSON.parse(data);
//                console.debug(data2);
                layer.open({content: '商品库存不足:'+data2.goods_name+'&nbsp;&nbsp;&nbsp;数量必须小于'+data2.goods_stock,skin: 'msg',time: 5});
            }else if( data== -1 ){
                layer.open({content: '请先登录',skin: 'msg',time: 3 });
                return;
            }else if( data== -2 ){
                layer.open({content: '没有商品无法结算',skin: 'msg',time: 3 });
                return;
            } else{
                location.href="{:url('home/Cart/confirmOrder')}";
            }
        })
    }
    //删除购物车商品
    function deleteGoods(id){
        var params={};
        params.goodsId=id;
        layer.open({content:'确定要删除该商品吗？',btn: ['删除', '取消'],skin: 'footer',
            yes: function(index){
                $.post("{:url('home/Cart/deleteGoods')}",params,function(data){
                    if( data>0 ){
                        layer.open({content: '操作成功',skin: 'msg',time: 3 });
                        location.href="{:url('home/Cart/cartList')}";
                    }else if( data== -1 ){
                        layer.open({content: '操作失败',skin: 'msg',time: 3 });
                        return;
                    }
                })
            }
        });
    }
    //合计
    goodsTotal();
    function goodsTotal(){
        $.post("{:url('home/Cart/goodsTotal')}",function(data){
//            console.debug(data);
            $('#goods_total_cart').html(data);
        })
    }
    //减少数量
    function reduceNum(id,goods_amount){
        var num = $('#update_num_'+id).val();
        if( num<=1  ){
            layer.open({content: '数量不能小于1，不能再减了',skin: 'msg',time: 3 });
            return;
        }
        var params={};
        params.goodsId=id;
        params.num=num;
//        alert(num);

        $.post("{:url('home/Cart/reduceCart')}",params,function(data){
//            console.debug(data);
            if( data>0 ){
                $('#update_num_'+id).val(num-1);
                var total =(num-1)* goods_amount;
                $('#goods_total_'+id).html(total);
                goodsTotal();
            }else if( data== -1 ){
                layer.open({content: '操作失败',skin: 'msg',time: 3 });
                return;
            }
        })
    }
    //增加数量
    function increaseNum(id,goods_amount){
        var num = $('#update_num_'+id).val();
        var params={};
        params.goodsId=id;
        params.num=num;
        $.post("{:url('home/Cart/increaseNum')}",params,function(data){
//            console.debug(data);
            if( data>0 ){
                $('#update_num_'+id).val(parseInt(num)+1);
                var total =(parseInt(num)+1)* goods_amount;
                $('#goods_total_'+id).html(total);
                goodsTotal();
            }else if( data== -1 ){
                layer.open({content: '操作失败',skin: 'msg',time: 3 });
                return;
            }
        })
    }
 //直接改变数量
    function changeGoodsNum(id,goods_amount,obj){
        var num = $(obj).val();
        if(isNaN(num)){
            layer.open({content: '操作失败,必须是数字',skin: 'msg',time: 3 });
            location.href="{:url('home/Cart/cartList')}";
            return;
        }
        if( num<1  ){
            layer.open({content: '操作失败,数量不能小于1',skin: 'msg',time: 3 });
//            location.href="{:url('home/Cart/cartList')}";
            setTimeout(window.location.href="{:url('home/Cart/cartList')}",3000);
            return;
        }
        var num2 =Math.round(num);
        var params={};
        params.goodsId=id;
        params.num=num2;
        $.post("{:url('home/Cart/changeGoodsNum')}",params,function(data){
//            console.debug(data);
            if( data>0 ){
                layer.open({content: '操作成功',skin: 'msg',time: 3 });
                $(obj).val(num2);
                var total =num2* goods_amount;
                $('#goods_total_'+id).html(total);
                goodsTotal();
            }else if( data== -1 ){
                layer.open({content: '操作失败',skin: 'msg',time: 3 });
                return;
            }
        })
    }
</script>
<!--<script src="__ROOT__/static/home/js/shop/jquery-1.8.3.min.js" type="text/javascript" ></script>-->
<!--<script src="__ROOT__/static/home/js/shop/mui.min.js"></script>-->
<!--<script src="__ROOT__/static/home/js/shop/others.js"></script>-->
<!--<script src="__ROOT__/static/home/js/shop/hmt.js" type="text/javascript" ></script>-->
<!--<script src="__ROOT__/static/home/js/shop/slick.js" type="text/javascript" ></script>-->
<!--<script src="__ROOT__/static/home/js/shop/goodscats.js" type="text/javascript" ></script>-->
<!--插件-->
<!--<link rel="stylesheet" href="__ROOT__/static/home/css/shop/swiper.min.css">-->
<!--<script src="__ROOT__/static/home/js/shop/swiper.jquery.min.js"></script>-->
</html>
